<template lang="html">
    <div class="box" v-loading="loading">



          <div class="body">
            <div class="summary_left">
                <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
                    <el-form-item label="时间段" style="margin-bottom: 0;width: 520px;">
                      <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="onchange" style="width: 100%;"
                        value-format="yyyy-MM-dd HH:mm:ss" >
                      </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>

                <div id="echart_canvas" style="width: 100%;height:600px;margin:0 auto;clear:both;"></div>
          </div>

                          <p class="summary">{{tableData.total}}</p>


    </div>
</template>

<script>
export default {
  data () {
    return {
      token: this.$store.state.user.token3,
      tableData: [],
      intervalTime: [],
      loading: false
    }
  },
  created () {
    this.switchTab()
  },
  methods: {
    initSetData () {
      this.tableData = []
      this.intervalTime = []
    },
    onchange () {
      this.switchTab()
    },
    switchTab () {
      this.loading = true
      var jsonData = {
        token: this.token,
        start_time: (this.intervalTime && this.intervalTime[0]) || '',
        end_time: (this.intervalTime && this.intervalTime[1]) || '',
      }
      this.$http3.gatherIncome(jsonData)
        .then(this.resultFn())
    },
    resultFn () {
      return function (res) {
        if (res) {
          this.tableData = res.data.data;
          this.renderEcharts(this.tableData)
          this.loading = false
        }
      }.bind(this)
    },
    renderEcharts (girdData) {

      var option2 = {

        title: {
          text: '数据统计',
          x: 'center'
        },
        tooltip: {},
        legend: {
          orient: 'vertical',
          x: 'left',

          data: [
            { name: girdData.income.userBbyOnce + '车主一次卡' },
            { name: girdData.income.userBbyQuartic + '车主四次套餐' },
            { name: girdData.income.userUCharge + '车主U惠多充值' },
            { name: girdData.income.agentSystemFee + '运营商系统使用费' },
            { name: girdData.income.supplySystemFee + '市代系统使用费' },
          ]
        },
        series: [
          {
            name: '总收入',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            data: [
              { value: girdData.income.userBbyOnce, name: girdData.income.userBbyOnce + '车主一次卡' },
              { value: girdData.income.userBbyQuartic, name: girdData.income.userBbyQuartic + '车主四次套餐' },
              { value: girdData.income.userUCharge, name: girdData.income.userUCharge + '车主U惠多充值' },
              { value: girdData.income.agentSystemFee, name: girdData.income.agentSystemFee + '运营商系统使用费' },
              { value: girdData.income.supplySystemFee, name: girdData.income.supplySystemFee + '市代系统使用费' },
            ]
          },
        ]

      }
      var myChart = this.$echarts.init(document.getElementById('echart_canvas'));
      myChart.setOption(option2);
      window.addEventListener('resize', () => myChart.resize())
    },

  }
}
</script>

<style lang="css" scoped>
@import "../../../my-style/app.css";
.summary {
  float: right;
}
.summary_left {
  float: left;
  z-index: 9;
  position: relative;
  margin: 10px 0;
}
</style>
